<template>
  <div class="iner">
    <div class="dashboard-text">
      <div class="lef">
        <i />
        数据库管理
      </div>
    </div>
    <div class="quyu">
      <div class="top">
        <span>数据列表</span>
      </div>
      <div class="hea">
        <button class="btn_a">开始备份</button>
        <button class="btn_b">设置备份</button>
      </div>
      <div class="conten">
        <el-table
          :data="tableData"
          :header-cell-style="{
            'height':'56px',
            'background':'#F2F2F2',
          }"
          style="width: 100%"
        >
          <el-table-column label="备份文件名" width="301" align="center">
            <template slot-scope="scope">
              <!-- 日期 -->
              <span style="display:block;width:300px;text-align:center;">{{ scope.row.dataName }}</span>
            </template>
          </el-table-column>
          <!-- 标题2 -->

          <el-table-column label="版本号" align="center" width="302">
            <template slot-scope="scope">
              <el-popover trigger="hover" placement="top">
                <p>姓名: {{ scope.row.name }}</p>
                <p>住址: {{ scope.row.address }}</p>
                <!-- 名字 -->
                <div slot="reference" class="name-wrapper">
                  <span style="display:block;width:300px;text-align:center;">{{ scope.row.dataCode }}</span>
                </div>
              </el-popover>
            </template>
          </el-table-column>
          <!-- 标题3 -->
          <el-table-column label="大小（字节）" align="center" width="302">
            <template slot-scope="scope">
              <span style="display:block;width:300px;text-align:center;">{{ scope.row.size }}</span>
            </template>
          </el-table-column>
          <!-- 标题4 -->
          <el-table-column label="备份时间" align="center" width="302">
            <template slot-scope="scope">
              <span style="display:block;width:300px;text-align:center;">{{ scope.row.createTime }}</span>
            </template>
          </el-table-column>
          <!-- 标题5 -->
          <el-table-column label="操作" align="center" width="302">
            <template slot-scope="scope">
              <span class="recover">恢复</span>
              <span class="delect" @click="delSql(scope.$index,scope.row)">删除</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <!-- 分页 -->
    <div class="pa">
      <!--      分页内容-->
      <div class="pagination-block">
        <el-pagination
          prev-text="上一页"
          next-text="下一页"
          :background="true"
          :current-page.sync="currentPage"
          :page-size="pageSize"
          :total="this.dataTotal?this.dataTotal:0"
          layout="prev, pager, next,slot, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        >
          <div class="page-number" layout="slot">
            <div class="jump-button">跳至</div>
          </div>
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import { addSQL, delSQL } from '../../../api/jurisdiction.js'
import { constants } from 'crypto'
export default {
  data() {
    return {
      pageSize: 10,
      id: '',
      currentPage1: 5,
      currentPage2: 5,
      currentPage3: 5,
      currentPage4: 4,
      dataTotal: '',
      currentPage: 1,
      prev: '上页',

      tableData: []
    }
  },
  created() {
    this.getSql()
  },
  methods: {
    // 获取数据库信息
    getSql() {
      addSQL({
        pageNum: 1,
        pageSize: 10
      }).then(res => {
        this.tableData = res.data.list
      })
    },
    // 删除数据库信息
    delSql(idx, list) {
      this.id = list.id
      delSQL([this.id]).then(res => {
        this.getSql()
      })
    },
    handleSizeChange() {
    },
    handleCurrentChange() {
    },
    handleSizeChange(size) {
      this.pagesize = size
    },
    // 当前页面
    handleCurrentChange(currentPage) {
      // 跳转页面
      this.currentPage = currentPage
      // 第几页数据等于跳转页面数据
      this.pageNum = currentPage
      this.getList()
    }

  }
}
</script>

<style lang="scss" scoped>
.iner {
  width: 100%;
  overflow-x:auto;
  margin: 0;
  margin-left: 29px;
  padding: 0 0 100px 0;

  .dashboard-text {
    margin-top: 17px;
    // width: 1549px;
    height: 37px;
    margin-bottom: 16px;
    .lef {
      float: left;
      line-height: 37px;
      font-size: 16px;
      font-weight: 900;
      color: #333;
      i {
        float: left;
        margin-top: 8.5px;
        width: 11px;
        height: 20px;
        background: rgba(72, 141, 255, 1);
        border-radius: 4px;
        margin-right: 12px;
      }
    }
    .rig {
      font-size: 14px;
      width: 76px;
      height: 37px;
      text-align: center;
      line-height: 37px;
      background: #488dff;
      border-radius: 4px;
      line-height: 37px;
      float: right;
    }
  }
  // box
  .quyu {
    margin-bottom: 30px;
    // width: 1549px;
    padding: 11px 24px 49px 17px;
    border: 1px solid #f2f2f2;
    box-shadow: #ccc 0px 0px 3px 1px;
    .top {
      // width: 1509px;
      height: 50px;
      margin-bottom: 9px;
      border-bottom: 1px solid rgba(242, 242, 242, 1);
      span {
        display: block;
        height: 54px;
        line-height: 54px;
        font-size: 14px;
        color: #333;
        width: 83px;
        height: 16px;
        font-size: 16px;
        font-family: PingFangSC-Semibold;
        font-weight: 600;
        color: rgba(51, 51, 51, 1);
      }
    }
    .hea {
      height: 71px;
      padding: 13px 0 18px 0;
      .btn_a {
        float: left;
        width: 100px;
        height: 40px;
        margin-right: 31px;
        background: rgba(72, 141, 255, 1);
        border-radius: 2px;
      }
      .btn_b {
        float: left;
        width: 100px;
        height: 40px;
        background: rgba(72, 141, 255, 1);
        border-radius: 2px;
      }
    }
    // set
    .conten {
      // width: 1509px;
      background: rgba(255, 255, 255, 1);
      box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.1);
      border-radius: 4px;
      .el-table-column {
        text-align: center !important;
      }
      .cell {
        height: 88px !important;
        line-height: 88px !important;
        .recover {
          display: block;
          width: 100%;
          height: 44px;
          line-height: 44px;
          text-align: center;
          font-size: 16px;
          color: #333;
        }
        .delect {
          display: block;
          width: 100%;
          height: 44px;
          line-height: 44px;
          text-align: center;
          font-size: 16px;
          color: #f13232;
        }
      }
      .is-leaf {
        text-align: center !important;
      }
      .el-table__row {
        height: 88px !important;
        line-height: 88px !important;
      }
      .is-center {
        height: 88px !important;
        line-height: 88px !important;
      }
      // 区域
      .el-table td,
      .el-table th {
        padding: 0 !important;
        min-width: 0;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        text-overflow: ellipsis;
        vertical-align: middle;
        position: relative;
        text-align: left;
      }
    }
  }
  // 分页
  .pa {
    width: 1549px !important;
    margin: 30px 162px 0 0 !important;
  }

  // 分页
}
</style>
